<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from "vue";
	import {
		loginApi,
		registerApi,
		sendCodeApi
	} from "/api/request";
	import {
		onShow
	} from "@dcloudio/uni-app";
	const props = defineProps({});
	const platform = uni.getStorageSync("platform");
	onShow(() => {
		// let tokenInfo = uni.getStorageSync("USER_TOKEN_INFOS");
		// if (tokenInfo) {
		// 	uni.redirectTo({
		// 		url: "/pages/index/index",
		// 		fail(e) {
		// 			console.log(e);
		// 		},
		// 	});
		// }
	});
	const validatePhone = (phone) => {
		const phonePattern = /^[1][3-9][0-9]{9}$/;
		return phonePattern.test(phone);
	};
	const messageList = ref({
		account: false,
		password: false,
	});
	const query = ref({
		account: "",
		password: "",
		check: false,
	});

	const submit = async () => {
		if (!validatePhone(query.value.account)) {
			messageList.value.account = true;
			return;
		} else {
			messageList.value.account = false;
		}
		query.value.password = query.value.password.replace(/[^\d]/g, "");
		if (query.value.password.length < 6) {
			messageList.value.password = true;
			return;
		} else {
			messageList.value.password = false;
		}
		if (!query.value.check) {
			uni.showToast({
				title: "请阅读并同意智校伴学服务协议和隐私政策",
				icon: "none",
			});
			return;
		}
		let res = await loginApi(query.value);
		uni.showToast({
			title: res.msg,
			icon: "none",
		});
		if (res.code == 1) {
			let userValueInfo = res.data.userinfo;
			uni.setStorageSync("USER_TOKEN_INFOS", userValueInfo);
			console.log(userValueInfo);
			uni.reLaunch({
				url: "/pages/index/index",
			});
		}
	};
	// const select = ref(0);
	const biyan = ref(false);
	const register = () => {
		uni.navigateTo({
			url: "/pages/register/login",
		});
	};
	const resetPassword = () => {
		uni.navigateTo({
			url: "/pages/register/login?type=3",
		});
	};
	const showXieYi = (index) => {
		uni.navigateTo({
			url: "/pages/yonghu/index?type=" + index,
		});
	};
</script>

<template>
	<view class="wrap uni-col" :style="{
		height:	 platform.rpxs < 1.5?'100%':''
	}">
		<view class="header-wrap uni-row" :style="{
        paddingTop: platform.dingbu + 'rpx',
        height: platform.dingbu + 96 + 'rpx',
      }">
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" mode="widthFix" />
			<view class="title"> 登录 </view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<view class="wai" :style="{
        marginTop: platform.rpxs > 1.5 ? '250rpx' : '310rpx',
      }">
			<!--  <view class="select-wraps uni-row">
        <view
          class="title"
          v-for="(item, index) in ['账号密码登录', '验证码登录']"
          :class="select == index ? 'active' : ''"
          :key="index"
          @click="select = index"
        >
          {{ item }}
        </view>
      </view> -->
			<view class="ipts-wrap" :style="{
          paddingTop: platform.rpxs > 1.5 ? '100rpx' : '50rpx',
        }">
				<view class="ipts-item uni-row">
					<image style="width: 48rpx; height: 48rpx" class="icon" src="../../static/img/login/user.png">
					</image>
					<input type="text" v-model.trim="query.account" placeholder="请输入手机号" />
				</view>
				<view class="message" :style="{ opacity: messageList.account ? '1' : '0' }">
					请输入正确格式手机号
				</view>
				<view class="ipts-item uni-row">
					<image style="
              min-width: 48rpx;
              min-height: 48rpx;
              width: 48rpx;
              height: 48rpx;
            " class="icon" src="../../static/img/login/lock.png">
					</image>
					<input :type="biyan ? 'text' : 'password'" v-model.trim="query.password" placeholder="请输入您的密码" />
					<image @click="biyan = !biyan" :src="
              biyan
                ? '/static/img/login/zhengyan.png'
                : '/static/img/login/biyan.png'
            " class="yanj">
					</image>
				</view>
				<view class="dibu uni-row">
					<view class="message" :style="{ opacity: messageList.password ? '1' : '0' }">
						密码不小于6位
					</view>

					<view class="right uni-row">
						<view class="item" @click="register"> 注册 </view>
						<view class="item" @click="resetPassword"> 忘记密码 </view>
					</view>
				</view>
			</view>
			<view class="btns" :style="{
          marginTop: platform.rpxs > 1.5 ? '200rpx' : '70rpx',
        }" @click="submit" :class="{
          active: validatePhone(query.account) && query.password && query.check,
        }">
				登录
			</view>
			<view :style="{
          marginTop: platform.rpxs > 1.5 ? '50rpx' : '70rpx',
        }" class="info uni-row">
				<image v-show="!query.check" @click="query.check = !query.check" src="/static/img/login/yuan.png"
					mode="widthFix" class="check"></image>
				<image v-show="query.check" @click="query.check = !query.check" src="/static/img/login/select-yuan.png"
					mode="widthFix" class="check"></image>
				我已阅读并同意<text class="cr" @click="showXieYi(1)">《智校伴学服务协议》</text>和
				<text class="cr" @click="showXieYi(2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url("/static/img/login/bg.png");
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.banner {
			// padding-top: 88rpx;
			height: 598rpx;

			overflow: hidden;
			margin: 0 auto;

			.title {
				height: 96rpx;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.box {
				position: relative;
				// padding-left: 70rpx;
				// padding-right: 20rpx;
				margin: 0 auto;

				.hello,
				.nihao {
					font-size: 60rpx;
					font-weight: bold;
				}

				.text {
					position: absolute;
					z-index: 3;
					// top: 110rpx;
				}

				.cen {
					justify-content: space-between;

					.xiaohai {
						// width: 360rpx;
					}
				}
			}
		}

		.wai {
			flex: 1;
			padding-top: 68rpx;
			position: relative;
			z-index: 3;
			border-radius: 32rpx 32rpx 0 0;
			background-color: #fff;

			.select-wraps {
				justify-content: space-around;
				padding: 0 50rpx;

				.title {
					position: relative;
					font-size: 32rpx;
					color: #333333;

					&.active {
						&::after {
							position: absolute;
							display: block;
							content: "";
							left: 50%;
							bottom: -14rpx;
							transform: translate(-50%, 0);
							width: 140rpx;
							height: 4rpx;
							background-color: #9561f3;
						}
					}
				}
			}

			.ipts-wrap {
				flex: 1;
				padding: 0 70rpx 0;

				.ipts-item {
					position: relative;
					height: 88rpx;
					background: #f8f8f8;
					border-radius: 46rpx;
					padding: 0 28rpx;

					.icon {
						margin-right: 20rpx;
					}

					.send-code {
						width: 300rpx;
						text-align: right;
						font-size: 28rpx;
						color: #333;
					}

					.yanj {
						position: absolute;
						right: 28rpx;
						top: 50%;
						transform: translate(0, -50%);
						width: 32rpx;
						height: 32rpx;
					}
				}

				input {
					color: #333;
					font-size: 28rpx;

					&::placeholder {
						color: #666;
					}
				}

				.message {
					line-height: 40rpx;
					font-size: 28rpx;
					height: 40rpx;
					color: #f56c6c;
					margin-left: 28rpx;
				}

				.dibu {
					padding-right: 28rpx;
					justify-content: space-between;
					font-size: 26rpx;
					color: #000000;

					.item {
						margin-left: 48rpx;
					}
				}
			}

			.right {
				margin-top: 10rpx;
			}

			.btns {
				margin: 0 70rpx 0;
				height: 88rpx;
				line-height: 88rpx;
				background: #d9d9d9;
				border-radius: 44rpx;
				font-size: 32rpx;
				text-align: center;
				color: #fff;

				&.active {
					background-color: #9561f3;
				}
			}

			.info {
				margin: 0 50rpx 0;
				justify-content: center;
				color: #b3b3b3;
				padding-left: 6rpx;

				.yuan {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 2rpx solid #cccccc;
					margin-right: 10rpx;
				}

				.check {
					width: 24rpx;
					margin-right: 10rpx;
				}

				font-size: 24rpx;

				.cr {
					color: #9561f3;
				}
			}
		}
	}
</style>